<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子路由、嵌套路由</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <h1>Hello App</h1>
    <p>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Foo</router-link>
    </p>

    <router-view></router-view>
</div>

<script>
    const Foo = {
        template: '<div> <router-link to="/foo/profile">Foo profile</router-link><router-view></router-view></div>',
        methods: {

        },
        watch: {
            '$route'(to, from) {
                console.log('watch---', to, from);
            }
        },
        beforeRouteUpdate(to, from, next) {
            console.log('before---to-', to);
            console.log('before---from-', from);
            console.log('before---next-', next);
            //*********************************************************************************
            //
            //    这里要注意，/foo/1 和 /foo/1/profile
            //    都是调用一个组件，vue在相同组件重复使用时给予缓存，所以在组件发生变化是必须要触发next()方法
            //
            //*********************************************************************************
            next();
        }
    };
    const Bar = { template: '<div>bar</div>' };
    const Profile = { template: '<div>my name is profile</div>' };
    const routes = [
        {
            path: '/foo',
            name: 'foo',
            component: Foo,
            children: [
                // 当 /foo/:id/profile 匹配成功，
                // FooProfile 会被渲染在 Foo 的 <router-view> 中
                {
                    path: 'profile',
                    name : 'profile',
                    component: Profile
                },
                // 默认视图
                {
                    path: '',
                    component: { template: '<div>there is default view</div>' }
                }
            ]
        },
        { path: '/bar', component: Bar }
    ];
    const router = new VueRouter({
        routes  //缩写，相当于 routers : routers
    });
    const app = new Vue({
        router
    }).$mount("#app");
</script>
</body>
</html>
